<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Material - Material Design Bootstrap 4 Template</title>

    <link rel="stylesheet" href="../../assets/css/main/bootstrap.min.css">

    <link rel="stylesheet" href="../../assets/css/main/material-design-icons.min.css">

    <link rel="stylesheet" href="../../assets/css/main/material.min.css">

    <link rel="stylesheet" href="../../assets/css/main/ripples.min.css">

    <link rel="stylesheet" href="../../assets/css/main/owl.carousel.min.css">

    <link rel="stylesheet" href="../../assets/css/main/magnific-popup.css">

    <link rel="stylesheet" href="../../assets/css/main/animate.min.css">

    <link rel="stylesheet" href="../../assets/css/main/style.css">

    <link rel="stylesheet" href="../../assets/css/main/responsive.css">

    <link rel="stylesheet" type="text/css" href="../../assets/css/colors/indigo.css" media="screen"/>
</head>
<body>

<header id="header">
    <div class="navbar-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="../../index.html">
                            <img src="../../assets/images/logo.png" alt="Logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
                            <ul id="nav" class="navbar-nav ml-auto">
                                <li class="nav-item active">
                                    <a class="page-scroll" href="#">Home <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a class="" href="../../index.html">Home V1</a></li>
                                        <li class="nav-item"><a class="active" href="index-2.html">Home V2</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Pages <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="about-us.html">About Us 1</a></li>
                                        <li class="nav-item"><a href="about-us2.html">About Us 2</a></li>
                                        <li class="nav-item"><a href="team.html">Team Members</a></li>
                                        <li class="nav-item"><a href="features.html">Features</a></li>
                                        <li class="nav-item"><a href="team-single.html">Team Single Page</a></li>
                                        <li class="nav-item"><a href="services.html">Services</a></li>
                                        <li class="nav-item"><a href="404.html">404</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Components <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="tab.html">Tabs</a></li>
                                        <li class="nav-item"><a href="alert.html">Alert</a></li>
                                        <li class="nav-item"><a href="accordion.html">Accordions</a></li>
                                        <li class="nav-item"><a href="pricing.html">Pricing Tables</a></li>
                                        <li class="nav-item"><a href="buttons.html">Buttons</a></li>
                                        <li class="nav-item"><a href="icons.html">Icons</a></li>
                                        <li class="nav-item"><a href="carousel.html">Carousel</a></li>
                                        <li class="nav-item"><a href="counter.html">Counter</a></li>
                                        <li class="nav-item"><a href="map.html">Google Map</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Portfolio <span><i class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="portfolio-2.html">Portfolio 2 columns</a></li>
                                        <li class="nav-item"><a href="portfolio.html">Portfolio 3 columns</a></li>
                                        <li class="nav-item"><a href="portfolio-single.html">Portfolio Single</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Blog <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="blog.html">Blog Page</a></li>
                                        <li class="nav-item"><a href="blog-single.html">Blog Single Page</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Contact <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu left-menu">
                                        <li class="nav-item"><a href="contact-us.html">Contact Us 1</a></li>
                                        <li class="nav-item"><a href="contact-us2.html">Contact Us 2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="search-icon">
<span class="open-search">
<i class="mdi mdi-magnify btn btn-common"></i>
</span>
                        </div>
                        <form role="search" class="navbar-form">
                            <div class="container">
                                <div class="row">
                                    <div class="form-group has-feedback">
                                        <input type="text" placeholder="Type and search ..." class="form-control">
                                        <div class="close"><i class="mdi mdi-close"></i></div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>


<div id="main-slide" class="carousel slide slider-2" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#main-slide" data-slide-to="0" class="active"></li>
        <li data-target="#main-slide" data-slide-to="1"></li>
        <li data-target="#main-slide" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="../../assets/images/slider/slide_1.jpg" alt="First slide">
            <div class="carousel-caption second-slider d-md-block text-left">
                <h1 class="wow fadeInLeft hero-heading" data-wow-delay="700ms">Crafted Carefully with Love</h1>
                <h5 class="wow fadeInLeft hero-sub-heading" data-wow-delay="500ms">Material Design Meets With The Power
                    of
                    Bootstrap 4</h5>
                <a href="javascript:void(0)" class="fadeInLeft wow btn btn-common" data-wow-delay="300ms"><i
                        class="material-icons mdi mdi-lightbulb-outline"></i> Explore
                    <div class="ripple-container"></div>
                </a>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../../assets/images/slider/slide_2.jpg" alt="Second slide">
            <div class="carousel-caption second-slider d-md-block text-left">
                <h1 class="wow fadeInUp hero-heading" data-wow-delay="700ms">UI Kit and Template</h1>
                <h5 class="wow fadeInUp hero-sub-heading" data-wow-delay="500ms">Extensively Customizable Tons of UI
                    Elements
                </h5>
                <a href="javascript:void(0)" class="fadeInUp wow btn btn-common" data-wow-delay="300ms"><i
                        class="material-icons mdi mdi-cart-outline"></i> Purchase</a>
                <a href="javascript:void(0)" class="fadeInUp wow btn btn-border" data-wow-delay="500ms"><i
                        class="material-icons mdi mdi-lightbulb-outline"></i> Learn More
                    <div class="ripple-container"></div>
                </a>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../../assets/images/slider/slide_3.jpg" alt="Third slide">
            <div class="carousel-caption second-slider d-md-block text-left">
                <h1 class="wow fadeInDown hero-heading" data-wow-delay="700ms">Feature Rich Elements</h1>
                <h5 class="fadeInDown wow hero-sub-heading" data-wow-delay="500ms">Ready to Use for Business, Agency,
                    Startup,
                    Portfolio Sites and More...</h5>
                <a href="javascript:void(0)" class="fadeInDown wow btn btn-common" data-wow-delay="300ms"><i
                        class="material-icons mdi mdi-arrow-collapse-down"></i> Download Now</a>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#main-slide" role="button" data-slide="prev">
        <span class="carousel-control" aria-hidden="true"><i class="mdi mdi-arrow-left" data-ripple-color="#F0F0F0"></i></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#main-slide" role="button" data-slide="next">
        <span class="carousel-control" aria-hidden="true"><i class="mdi mdi-arrow-right"
                                                             data-ripple-color="#F0F0F0"></i></span>
        <span class="sr-only">Next</span>
    </a>
</div>


<section class="Material-about-section section-padding">
    <div class="container">
        <div class="row justify-content-md-start justify-content-center">

            <div class="col-sm-8 col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".2s">
                <div class="about-single">
                    <i class="material-icons mdi mdi-layers"></i>
                    <h2 class="subtitle">Bootstrap 4</h2>
                    <p>Excepteur sint occaecat cupidatat non proidt, sunt in culpa qui.</p>
                </div>
            </div>

            <div class="col-sm-8 col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".3s">
                <div class="about-single">
                    <i class="material-icons mdi mdi-cards-playing-outline"></i>
                    <h2 class="subtitle">Material Design</h2>
                    <p>Excepteur sint occaecat cupidatat non proidt, sunt in culpa qui.</p>
                </div>
            </div>

            <div class="col-sm-8 col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".4s">
                <div class="about-single">
                    <i class="material-icons mdi mdi-alarm-check"></i>
                    <h2 class="subtitle">Fast and Clean</h2>
                    <p>Excepteur sint occaecat cupidatat non proidt, sunt in culpa qui.</p>
                </div>
            </div>

            <div class="col-sm-8 col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".5s">
                <div class="about-single">
                    <i class="material-icons mdi mdi-responsive"></i>
                    <h2 class="subtitle">Fully Responsive</h2>
                    <p>Excepteur sint occaecat cupidatat non proidt, sunt in culpa qui.</p>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="welcome-section section-padding section-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-7 col-xs-12">
                <div class="Material-tab">

                    <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#business" role="tab"><i
                                    class="mdi mdi-account-multiple-outline"></i> <br> Business</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#startup" role="tab"><i
                                    class="mdi mdi-flash-outline"></i>
                                <br> Startup</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#agency" role="tab"><i
                                    class="mdi mdi-all-inclusive"></i>
                                <br> Agency</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#saas" role="tab"><i
                                    class="mdi mdi-cloud-outline"></i> <br>
                                SaaS</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="business" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi.</p>
                        </div>
                        <div class="tab-pane fade" id="startup" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi.</p>
                        </div>
                        <div class="tab-pane fade" id="agency" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi.</p>
                        </div>
                        <div class="tab-pane fade" id="saas" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-5 col-xs-12 welcome-column">
                <div class="video-gallery">
                    <img class="img-fluid" src="../../assets/images/about/video.jpg" alt="">
                    <div class="overlay-gallery">
                        <div class="icon-holder">
                            <div class="icon">
                                <a href="https://www.youtube.com/watch?v=r44RKWyfcFw" class="video-popup wow fadeInUp"
                                   data-wow-duration="1000ms" data-wow-delay="0.3s"><i
                                        class="mdi mdi-play-circle-outline"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="Material-service-section section-padding">
    <div class="container">
        <div class="row">

            <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                <h1 class="section-title">Our Features</h1>
            </div>
        </div>

        <div class="row">

            <div class="col-md-6 col-lg-4 col-xl-4 single-service-widget features-block wow animated fadeInUp"
                 data-wow-delay=".3s">
                <div class="media">
                    <div class="media-left">
                        <i class="material-icons pulse-shrink mdi mdi-language-html5"></i>
                    </div>
                    <div class="media-body">
                        <h2 class="subtitle"><a href="#">20+ HTML Pages</a></h2>
                        <p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-4 single-service-widget features-block wow animated fadeInUp"
                 data-wow-delay=".4s">
                <div class="media">
                    <div class="media-left">
                        <i class="material-icons pulse-shrink mdi mdi-checkbox-multiple-blank-outline"></i>
                    </div>
                    <div class="media-body">
                        <h2 class="subtitle"><a href="#">Multiple Variations</a></h2>
                        <p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-4 single-service-widget features-block wow animated fadeInUp"
                 data-wow-delay=".5s">
                <div class="media">
                    <div class="media-left">
                        <i class="material-icons pulse-shrink mdi mdi-file-tree"></i>
                    </div>
                    <div class="media-body">
                        <h2 class="subtitle"><a href="#">Feature-rich Sections</a></h2>
                        <p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-4 single-service-widget features-block wow animated fadeInUp"
                 data-wow-delay=".6s">
                <div class="media">
                    <div class="media-left">
                        <i class="material-icons pulse-shrink mdi mdi-tune"></i>
                    </div>
                    <div class="media-body">
                        <h2 class="subtitle"><a href="#">Highly-Customizable</a></h2>
                        <p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-4 single-service-widget features-block wow animated fadeInUp"
                 data-wow-delay=".7s">
                <div class="media">
                    <div class="media-left">
                        <i class="material-icons pulse-shrink mdi mdi-package-variant"></i>
                    </div>
                    <div class="media-body">
                        <h2 class="subtitle"><a href="#">100+ UI Elements</a></h2>
                        <p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-4 single-service-widget features-block wow animated fadeInUp"
                 data-wow-delay=".8s">
                <div class="media">
                    <div class="media-left">
                        <i class="material-icons pulse-shrink mdi mdi-crown"></i>
                    </div>
                    <div class="media-body">
                        <h2 class="subtitle"><a href="#">Simplified Design</a></h2>
                        <p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="Material-portfolio-section section-padding section-dark">
    <div class="container">
        <div class="row">

            <div class="col-md-4 col-lg-4 col-xl-6  Material-title-section wow animated fadeInLeft"
                 data-wow-delay=".2s">
                <h1 class="section-title">Featured Works</h1>
            </div>

            <div class="col-md-8 col-lg-8 col-xl-6  portfolio-nav mb-3 wow animated fadeInRight" data-wow-delay=".2s">
                <ul class="nav nav-pills">
                    <li><a class="filter active" data-filter="all">All</a></li>
                    <li><a class="filter" data-filter=".business">Business</a></li>
                    <li><a class="filter" data-filter=".development">Development</a></li>
                    <li><a class="filter" data-filter=".creative">Creative</a></li>
                    <li><a class="filter" data-filter=".more">More</a></li>
                </ul>
            </div>
            <div class="portfolio-item-wrapper clearfix wow animated fadeInUp" data-wow-delay=".5s"
                 id="Material-portfolio">

                <div class="col-md-6 col-lg-4 col-xl-4 pb-4 mix business">
                    <figure class="single-portfolio">
                        <img class="img-fluid" src="../../assets/images/portfolio/work1.jpg" alt="">
                        <figcaption class="hover-content">
                            <a class="btn btn-round btn-fab btn-xs" href="portfolio-single.html"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                            <a href="portfolio-single.html">
                                <h2 class="subtitle">Business Cards</h2>
                            </a>
                            <p>Asus Inc.</p>
                        </figcaption>
                    </figure>
                </div>

                <div class="col-md-6 col-lg-4 col-xl-4 mix development more">
                    <figure class="single-portfolio">
                        <img class="img-fluid" src="../../assets/images/portfolio/work2.jpg" alt="">
                        <figcaption class="hover-content">
                            <a class="btn btn-round btn-fab btn-xs" href="portfolio-single.html"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                            <a href="portfolio-single.html">
                                <h2 class="subtitle">Brochure Design</h2>
                            </a>
                            <p>Tesla Motors</p>
                        </figcaption>
                    </figure>
                </div>

                <div class="col-md-6 col-lg-4 col-xl-4 mix creative business">
                    <figure class="single-portfolio">
                        <img class="img-fluid" src="../../assets/images/portfolio/work3.jpg" alt="">
                        <figcaption class="hover-content">
                            <a class="btn btn-round btn-fab btn-xs" href="portfolio-single.html"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                            <a href="portfolio-single.html">
                                <h2 class="subtitle">Coffee Cup</h2>
                            </a>
                            <p>Starbucks USA</p>
                        </figcaption>
                    </figure>
                </div>

                <div class="col-md-6 col-lg-4 col-xl-4 mix creative more development">
                    <figure class="single-portfolio">
                        <img class="img-fluid" src="../../assets/images/portfolio/work4.jpg" alt="">
                        <figcaption class="hover-content">
                            <a class="btn btn-round btn-fab btn-xs" href="portfolio-single.html"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                            <a href="portfolio-single.html">
                                <h2 class="subtitle">Landing Page</h2>
                            </a>
                            <p>Uniliver, India</p>
                        </figcaption>
                    </figure>
                </div>

                <div class="col-md-6 col-lg-4 col-xl-4 mix more development">
                    <figure class="single-portfolio">
                        <img class="img-fluid" src="../../assets/images/portfolio/work5.jpg" alt="">
                        <figcaption class="hover-content">
                            <a class="btn btn-round btn-fab btn-xs" href="portfolio-single.html"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                            <a href="portfolio-single.html">
                                <h2 class="subtitle">Dashboard Design</h2>
                            </a>
                            <p>Linode Inc.</p>
                        </figcaption>
                    </figure>
                </div>

                <div class="col-md-6 col-lg-4 col-xl-4 mix creative business">
                    <figure class="single-portfolio">
                        <img class="img-fluid" src="../../assets/images/portfolio/work6.jpg" alt="">
                        <figcaption class="hover-content">
                            <a class="btn btn-round btn-fab btn-xs" href="portfolio-single.html"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                            <a href="portfolio-single.html">
                                <h2 class="subtitle">Re-Branding</h2>
                            </a>
                            <p>Alphabet Inc.</p>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
        <div class="row mt-4 wow animated fadeInUp" data-wow-delay=".3s">
            <div class="col-md-12 text-center">
                <a href="javascript:void(0)" class="animated4 btn btn-common" data-ripple-color="#000"><i
                        class="material-icons mdi mdi-lightbulb-outline"></i> Browse All
                    <div class="ripple-container"></div>
                </a>
            </div>
        </div>
    </div>
</section>


<section class="work-counter-section section-padding">
    <div class="container">
        <div class="row">

            <div class="col-md-3 col-sm-6 work-counter-widget text-center wow animated fadeInUp" data-wow-delay=".2s">
                <div class="counter">
                    <div class="icon"><i class="material-icons mdi mdi-check-all"></i></div>
                    <div class="timer">347</div>
                    <p>Projects Done</p>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 work-counter-widget text-center wow animated fadeInUp" data-wow-delay=".3s">
                <div class="counter">
                    <div class="icon"><i class="material-icons mdi mdi-clock"></i></div>
                    <div class="timer">8896</div>
                    <p>Working Hours</p>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 work-counter-widget text-center wow animated fadeInUp" data-wow-delay=".4s">
                <div class="counter">
                    <div class="icon"><i class="material-icons mdi mdi-account-multiple-outline"></i></div>
                    <div class="timer">35</div>
                    <p>Team Members</p>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 work-counter-widget text-center wow animated fadeInUp" data-wow-delay=".5s">
                <div class="counter">
                    <div class="icon"><i class="material-icons mdi mdi-sticker-emoji"></i></div>
                    <div class="timer">233</div>
                    <p>Happy Clients</p>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="team section-padding section-dark">
    <div class="container">
        <div class="row">

            <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                <h1 class="section-title">Meet The Team</h1>
            </div>
        </div>
        <div class="row">

            <div class="col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".3s">
                <div class="single-team-widget">
                    <img src="../../assets/images/team/team1.jpg" class="img-fluid" alt="">
                    <div class="team-member-info">
                        <div class="know-more">
                            <a class="btn btn-round btn-fab btn-xs" href="javascript:void(0)"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                        </div>
                        <h2 class="subtitle">Rob Percy</h2>
                        <p>Co-Founder</p>
                        <div class="social-profiles">
                            <a href="#"><i class="mdi mdi-twitter"></i></a>
                            <a href="#"><i class="mdi mdi-facebook"></i></a>
                            <a href="#"><i class="mdi mdi-instagram"></i></a>
                            <a href="#"><i class="mdi mdi-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".4s">
                <div class="single-team-widget">
                    <img src="../../assets/images/team/team2.jpg" class="img-fluid" alt="">
                    <div class="team-member-info">
                        <div class="know-more">
                            <a class="btn btn-round btn-fab btn-xs" href="javascript:void(0)"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                        </div>
                        <h2 class="subtitle">Jennifer L.</h2>
                        <p>Graphic Designer</p>
                        <div class="social-profiles">
                            <a href="#"><i class="mdi mdi-twitter"></i></a>
                            <a href="#"><i class="mdi mdi-facebook"></i></a>
                            <a href="#"><i class="mdi mdi-instagram"></i></a>
                            <a href="#"><i class="mdi mdi-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".5s">
                <div class="single-team-widget">
                    <img src="../../assets/images/team/team3.jpg" class="img-fluid" alt="">
                    <div class="team-member-info">
                        <div class="know-more">
                            <a class="btn btn-round btn-fab btn-xs" href="javascript:void(0)"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                        </div>
                        <h2 class="subtitle">Tom Hanks.</h2>
                        <p>SEO Speacialist</p>
                        <div class="social-profiles">
                            <a href="#"><i class="mdi mdi-twitter"></i></a>
                            <a href="#"><i class="mdi mdi-facebook"></i></a>
                            <a href="#"><i class="mdi mdi-instagram"></i></a>
                            <a href="#"><i class="mdi mdi-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3 col-xl-3 wow animated fadeInUp" data-wow-delay=".6s">
                <div class="single-team-widget">
                    <img src="../../assets/images/team/team4.jpg" class="img-fluid" alt="">
                    <div class="team-member-info">
                        <div class="know-more">
                            <a class="btn btn-round btn-fab btn-xs" href="javascript:void(0)"><i
                                    class="material-icons mdi mdi-arrow-right"></i>
                                <div class="ripple-container"></div>
                            </a>
                        </div>
                        <h2 class="subtitle">Emma Watson</h2>
                        <p>Head Of Ideas</p>
                        <div class="social-profiles">
                            <a href="#"><i class="mdi mdi-twitter"></i></a>
                            <a href="#"><i class="mdi mdi-facebook"></i></a>
                            <a href="#"><i class="mdi mdi-instagram"></i></a>
                            <a href="#"><i class="mdi mdi-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<div class="testimonial section-padding">
    <div class="container">
        <div class="row">

            <div class="testimonials-carousel owl-carousel">
                <div class="item">
                    <div class="testimonial-item">
                        <div class="datils">
                            <h5>Adam Schwartz</h5>
                            <span>Software Articulate, Google</span>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the
                                industry's <br class="d-none d-lg-block"> standard dummy text ever since the 1500s Lorem
                                Ipsum.</p>
                        </div>
                        <div class="img">
                            <a href="#"><img class="img-fluid" src="../../assets/images/testimonial/author1.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="testimonial-item">
                        <div class="datils">
                            <h5>Clark Brown</h5>
                            <span>Brand Managerr</span>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the
                                industry's <br class="d-none d-lg-block"> standard dummy text ever since the 1500s Lorem
                                Ipsum.</p>
                        </div>
                        <div class="img">
                            <a href="#"><img class="img-fluid" src="../../assets/images/testimonial/author2.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="testimonial-item">
                        <div class="datils">
                            <h5>Ana Blunt</h5>
                            <span>Creative Director</span>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                                has been the
                                industry's <br class="d-none d-lg-block"> standard dummy text ever since the 1500s Lorem
                                Ipsum.</p>
                        </div>
                        <div class="img">
                            <a href="#"><img class="img-fluid" src="../../assets/images/testimonial/author3.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="client section-padding section-dark">
    <div class="container">
        <div class="row">
            <div id="client-logo" class="owl-carousel">
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client1.png" alt=""/>
                    </a>
                </div>
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client2.png" alt=""/>
                    </a>
                </div>
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client3.png" alt=""/>
                    </a>
                </div>
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client4.png" alt=""/>
                    </a>
                </div>
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client1.png" alt=""/>
                    </a>
                </div>
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client2.png" alt=""/>
                    </a>
                </div>
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client3.png" alt=""/>
                    </a>
                </div>
                <div class="client-logo item">
                    <a href="#">
                        <img class="img-fluid" src="../../assets/images/clients/client4.png" alt=""/>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<section class="Material-blog-section section-padding">
    <div class="container">
        <div class="row">

            <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                <h1 class="section-title">From The Blog</h1>
            </div>
        </div>
        <div class="row">

            <div class="col-md-6 col-lg-4 col-xl-4 wow animated fadeInUp" data-wow-delay=".3s">
                <article class="single-blog-post">

                    <div class="featured-image">
                        <a href="#">
                            <img src="../../assets/images/blog/featured1.jpg" alt="">
                        </a>
                    </div>

                    <div class="post-meta">

                        <a href="blog-single.html">
                            <h2 class="subtitle">12+ Amazing Growth Hacking Tips and Tricks</h2>
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio perferendis assumenda ipsum
                            maiores
                            dolorum similique obcaecati perspiciatis.</p>
                    </div>
                    <div class="meta-tags">
                        <span class="comments"><a href="#"><i
                                class="mdi mdi-comment-outline"></i> 24 Comments</a></span>

                        <a class="btn btn-round btn-fab" href="blog-single.html"><i
                                class="material-icons mdi mdi-arrow-right"></i>
                            <div class="ripple-container"></div>
                        </a>
                    </div>
                </article>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-4 wow animated fadeInUp" data-wow-delay=".4s">
                <article class="single-blog-post">

                    <div class="featured-image">
                        <a href="#">
                            <img src="../../assets/images/blog/featured2.jpg" alt="">
                        </a>
                    </div>

                    <div class="post-meta">

                        <a href="blog-single.html">
                            <h2 class="subtitle">10 Tips to Validate Your Next Startup Idea</h2>
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio perferendis assumenda ipsum
                            maiores
                            dolorum similique obcaecati perspiciatis.</p>
                    </div>
                    <div class="meta-tags">
                        <span class="comments"><a href="#"><i
                                class="mdi mdi-comment-outline"></i> 24 Comments</a></span>

                        <a class="btn btn-round btn-fab" href="blog-single.html"><i
                                class="material-icons mdi mdi-arrow-right"></i>
                            <div class="ripple-container"></div>
                        </a>
                    </div>
                </article>
            </div>

            <div class="col-md-6 col-lg-4 col-xl-4 wow animated fadeInUp" data-wow-delay=".5s">
                <article class="single-blog-post">

                    <div class="featured-image">
                        <a href="#">
                            <img src="../../assets/images/blog/featured3.jpg" alt="">
                        </a>
                    </div>

                    <div class="post-meta">

                        <a href="blog-single.html">
                            <h2 class="subtitle">How to Create Successful Website for Your Agency</h2>
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio perferendis assumenda ipsum
                            maiores
                            dolorum similique obcaecati perspiciatis.</p>
                    </div>
                    <div class="meta-tags">
                        <span class="comments"><a href="#"><i
                                class="mdi mdi-comment-outline"></i> 24 Comments</a></span>

                        <a class="btn btn-round btn-fab" href="blog-single.html"><i
                                class="material-icons mdi mdi-arrow-right"></i>
                            <div class="ripple-container"></div>
                        </a>
                    </div>
                </article>
            </div>
        </div>
        <div class="row mt-5 wow animated fadeInUp" data-wow-delay=".6s">

            <div class="col-md-12 text-center">
                <a href="blog.html" class="animated4 btn btn-common" data-ripple-color="#000"><i
                        class="material-icons mdi mdi-library-books"></i> Explore More on Blog
                    <div class="ripple-container"></div>
                </a>
            </div>
        </div>
    </div>
</section>


<section class="Material-contact-section section-padding section-dark">
    <div class="container">
        <div class="row">

            <div class="col-md-12 wow animated fadeInLeft" data-wow-delay=".2s">
                <h1 class="section-title">Love to Hear From You</h1>
            </div>
        </div>
        <div class="row">

            <div class="col-md-6 mt-3 contact-widget-section2 wow animated fadeInLeft" data-wow-delay=".2s">
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when
                    looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
                    distribution of
                    letters, as opposed to using Content.</p>
                <div class="find-widget">
                    <a href="#"><i class="material-icons mdi mdi-map-marker"></i>4435 Berkshire Circle Knoxville</a>
                </div>
                <div class="find-widget">
                    <a href="#"><i class="material-icons mdi mdi-phone"></i> + 879-890-9767</a>
                </div>
                <div class="find-widget">
                    <a href="#"><i class="material-icons mdi mdi-email-open mr-3"></i> <span class="__cf_email__"
                                                                                             data-cfemail="2b585e5b5b44595f6b664a5f4e59424a4705484446">[email&#160;protected]</span></a>
                </div>
                <div class="find-widget">
                    <a href="#"><i class="material-icons mdi mdi-clock"></i> Mon to Sat: 09:30 AM - 10.30 PM</a>
                </div>
            </div>

            <div class="col-md-6 wow animated fadeInRight" data-wow-delay=".2s">
                <form class="shake" role="form" method="post" id="contactForm" name="contact-form"
                      data-toggle="validator">

                    <div class="form-group label-floating">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" id="name" type="text" name="name" required
                               data-error="Please enter your name">
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="form-group label-floating">
                        <label class="control-label" for="email">Email</label>
                        <input class="form-control" id="email" type="email" name="email" required
                               data-error="Please enter your Email">
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="form-group label-floating">
                        <label class="control-label">Subject</label>
                        <input class="form-control" id="msg_subject" type="text" name="subject" required
                               data-error="Please enter your message subject">
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="form-group label-floating">
                        <label for="message" class="control-label">Message</label>
                        <textarea class="form-control" rows="3" id="message" name="message" required
                                  data-error="Write your message"></textarea>
                        <div class="help-block with-errors"></div>
                    </div>

                    <div class="form-submit mt-5">
                        <button class="btn btn-common" type="submit" id="form-submit"><i
                                class="material-icons mdi mdi-message-outline"></i> Send Message
                        </button>
                        <div id="msgSubmit" class="h3 text-center hidden"></div>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>


<footer class="page-footer center-on-small-only  pt-0 footer-widget-container">

    <div class="container pt-5 mb-5">
        <div class="row">

            <div class="col-md-6 col-lg-3 col-xl-3 footer-contact-widget">
                <h3 class="footer-title">About Us</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates eos minus expedita illo
                    recusandae
                    esse labore obcaecati nisi amet quia odio sapiente! Fugiat, voluptatibus nemo necessitatibus
                    porro.</p>
                <ul>
                    <li>
                        <a href="#"><i class="mdi mdi-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-instagram"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-github"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-linkedin"></i></a>
                    </li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 recent-widget">
                <h3 class="footer-title">Recent Posts</h3>
                <ul class="image-list">
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a1.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Fusce gravida tortor felis</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a2.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Ornare Nullam Risus Cursus</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a3.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Euismod Nullam Fusce Dapibus</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 link-widget">
                <h3 class="footer-title">Get in Touch</h3>
                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem
                    malesuada
                    magna mollis euismod. Praesent commodo cursus.</p>
                <div class="mt-3"></div>
                <ul class="icon-list">
                    <li><i class="mdi mdi-map-marker"></i> 548 San Francisco, CA</li>
                    <li><i class="mdi mdi-email"></i> <a
                            href="/cdn-cgi/l/email-protection#92fff3fbfed2fff3e6f7e0fbf3febcf1fdff"
                            class="nocolor"><span class="__cf_email__"
                                                  data-cfemail="771a161e1b371a160312051e161b5914181a">[email&#160;protected]</span></a>
                    </li>
                    <li><i class="mdi mdi-phone-classic"></i> +00 (123) 456 78 90</li>
                    <li><i class="mdi mdi-cellphone-iphone"></i> +00 (121) 455 47 54</li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 footer-contact">
                <h3 class="footer-title">Subscribe</h3>
                <div class="widget">
                    <div class="newsletter-wrapper">
                        <form method="post" id="subscribe-form" name="subscribe-form" class="validate">
                            <div class="form-group">
                                <input type="email" value="" name="EMAIL" class="email form-control" id="EMAIL"
                                       placeholder="Email Address" required="">
                                <button type="submit" name="subscribe" id="subscribe" class="btn btn-common pull-right">
                                    Join
                                </button>
                                <div class="clearfix"></div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="widget">
                    <h5 class="widget-title">Useful Links</h5>
                    <ul class="unordered-list">
                        <li><a href="#" class="nocolor">Terms of Use</a></li>
                        <li><a href="#" class="nocolor">Privacy Policy</a></li>
                        <li><a href="#" class="nocolor">Company Profile</a></li>
                        <li><a href="#" class="nocolor">Why Choose Us</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>


    <div class="footer-copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p>By <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
                </div>
            </div>
        </div>
    </div>

</footer>


<a href="#" class="back-to-top">
    <div class="ripple-container"></div>
    <i class="mdi mdi-arrow-up">
    </i>
</a>

<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>


<script data-cfasync="false" src="../../assets/js/email-decode.min.js"></script>
<script src="../../assets/js/modernizr-3.7.1.min.js"></script>
<script src="assets/js/vendor/jquery-3.5.1-min.js"></script>
<script src="../../assets/js/popper.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/jquery.mixitup.min.js"></script>
<script src="../../assets/js/jquery.inview.js"></script>
<script src="../../assets/js/jquery.counterup.min.js"></script>
<script src="../../assets/js/material.min.js"></script>
<script src="../../assets/js/ripples.min.js"></script>
<script src="../../assets/js/owl.carousel.min.js"></script>
<script src="../../assets/js/form-validator.min.js"></script>
<script src="../../assets/js/contact-form-script.min.js"></script>
<script src="../../assets/js/wow.js"></script>
<script src="../../assets/js/jquery.magnific-popup.min.js"></script>
<script src="../../assets/js/main.js"></script>
</body>
</html>
